<template>
	<view class="index">
		<view class="zr">
			<view class="user-info">
				<view class="logo">
					<image :src="userInfo.avatarUrl" mode="" class="avatar"></image>
					<view class="text">
						你好,{{userInfo.nickName}}
					</view>
				</view>
			</view>
			<view class="water">
				<view class="water-c">
					<view class="water-1"></view>
					<view class="water-2"></view>
				</view>
			</view>
		</view>
		<view class="content">
			<uni-list-item title="关于" showExtraIcon
			clickable
			 :extraIcon="{
				 color: '#4cd964',size: '22',type: 'info'
			 }"
			 showArrow @click="about" ></uni-list-item>
			<uni-list-item title="退出" showExtraIcon 
			clickable
			 :extraIcon="{
				 color: '#4cd964',size: '22',type: 'gear'
			 }"
			 showArrow @click="logout" ></uni-list-item>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{}
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {
			logout(){
				uni.showModal({
					title: '确认操作',
					content: '是否退出登录?',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							uniCloud.callFunction({
								name:'baseCommon',
								data:{
									action:'logout'
								},
								success: (res) => {
									uni.removeStorageSync('userInfo');
									uni.removeStorageSync('uni_id_token');
									uni.removeStorageSync('uni_id_token_expired');
									uni.navigateTo({
										url: '/pages/user/login'
									});
								}
							})
						}
					}
				});
			},
			about(){
				uni.navigateTo({
					url:'./about'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		margin-top: 30rpx;
		/deep/ .uni-list-item{
			border-bottom:1rpx solid #c8c7cc;
		}
	}
	.user-info{
		height: 100%;
		line-height: 300rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		.logo{
			height: 100%;
			display: flex;
			align-items: center;
			.text{
				margin-left: 20rpx;
				color:#fff
			}
		}
		.avatar{
			width: 150rpx;
			height: 150rpx;
			border-radius: 150rpx;
		}
	}
	/*组件背景颜色*/
	.zr {
		background: linear-gradient(to right, #00eb89 , #a3f178);
		width: 100%;
		height: 300rpx;
		position: relative;
	}

	.water {
		position: absolute;
		left: 0;
		bottom: -10px;
		height: 30px;
		width: 100%;
		z-index: 1
	}

	.water-c {
		position: relative
	}

	.water-1 {
		background: url("") repeat-x;
		background-size: 600rpx;
		-webkit-animation: wave-animation-1 3.5s infinite linear;
		animation: wave-animation-1 3.5s infinite linear
	}

	.water-2 {
		top: 5px;
		background: url("") repeat-x;
		background-size: 600rpx;
		-webkit-animation: wave-animation-2 6s infinite linear;
		animation: wave-animation-2 6s infinite linear
	}

	.water-1,
	.water-2 {
		position: absolute;
		width: 100%;
		height: 60rpx
	}

	.back-white {
		background: #fff
	}

	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top
		}

		100% {
			background-position: 600rpx top
		}
	}

	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top
		}

		100% {
			background-position: 600rpx top
		}
	}
</style>
